<template>
    <h2>用户投资页面</h2>
    <table class="table table-bordered">
        <tr>
            <td>项目名称</td>
            <td>
                {{ info.I_Name }}
            </td>
        </tr>
        <tr>
            <td>投资总金额</td>
            <td>
                {{ info.I_Budget }}
            </td>
        </tr>
        <tr>
            <td>已投金额</td>
            <td>
                {{ info.I_Receive }}
            </td>
        </tr>
        <tr>
            <td>剩余金额</td>
            <td>
                {{ info.I_Residue }}
            </td>
        </tr>
        <tr>
            <td>投资金额</td>
            <td>
                <input type="text" v-model="invest">
            </td>
        </tr>
        <tr>
            <td>预期最高收益</td>
            <td>
                {{ (Number(invest) * 0.08).toFixed(2) }}CNY
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <button class="btn btn-primary" @click="addInvest">确定投资</button>
            </td>

        </tr>
    </table>

</template>

<script setup lang="ts">
import { useRoute,useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { useUserStore } from '../../store/index.ts';

const userStore = useUserStore();
const route = useRoute();
const router = useRouter(); 
//创建响应式对象
const info = ref({
    I_Id: '',
    I_Name: '',
    I_Budget: '',
    I_Receive: '',
    I_Residue: ''

})
const invest = ref('')

onMounted(() => {
    loadDate();
})
// 加载数据
const loadDate = () => {
    // 发送请求获取数据
    axios.get('https://localhost:44387/api/Invests/GetInvestInfo', {
        params: {
            I_Id: route.query.Iid
        }
    }).then(function (res) {
        console.log(res.data);
        info.value = res.data;
    })
}
//确定投资
const addInvest = () => {
    // 发送请求添加投资
    axios.post('https://localhost:44387/api/Invests/AddUserInvestInfo', {
        I_Id: route.query.Iid,
        // 用户id
        U_Id: userStore.UserId,
        UI_Money: invest.value
    }).then(function (res) {
        console.log(res.data);
        if (res.data > 0) {
            alert('用户投资成功！');
            router.push('/ShowUserInvestInfo');
           
        } else {
            alert('用户投资失败！');
        }
    })
}


// //修改投资项目信息
// const updateInvest = () => {
//     // 发送请求修改投资项目信息
//     axios.put('https://localhost:44387/api/Invests/ChangInvestInfo', {
//         I_Id: info.value.I_Id,
//         UI_Money:invest.value
//     }).then(function (res) {
//         console.log(res.data);
//         if (res.data > 0) {
//             console.log(res.data);
//             alert('投资项目信息修改成功！');

            
//         } else {
//             alert('投资项目信息修改失败！');
//         }
//     })
// }
</script>
